<template>
  <!--列表-->
  <router-exact-view name="static">
    <div style="width: 100%" class="template-list-page-container">
      <div class="search-area">
        <search-form-container>
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="所属学期">
              <el-select v-model="searchForm.schoolTermId" placeholder="请选择所属学期">
                <el-option v-for="item in termOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="handlePageChange(1)"
              >查 询</el-button>
              <el-button @click="resetSearchForm">重 置</el-button>
            </el-form-item>
          </el-form>
        </search-form-container>
      </div>
      <my-table
        v-loading="loading"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :btn-options="btnOptions"
        title="送教统计报表"
        @page-change="handlePageChange"
      >
        <div slot="table-btn">
          <el-button type="primary" @click="exportStatic">导出报表</el-button>
        </div>
      </my-table>
    </div>
  </router-exact-view>
</template>

<script>
import MyTable from '@/components/my-table/index'
import SearchFormContainer from '@/components/search-form-container/index'
import RouterExactView from '@/components/routerExactView'
import { getAllTerm } from '@/api/basic'
import { sendStatic } from '@/api/task'
import { sendStaticColumns } from '../columns'
import { recordStatusOptions } from '../attr'

const isProd = process.env.NODE_ENV === 'production'
export default {
  components: { RouterExactView, MyTable, SearchFormContainer },
  data() {
    const that = this
    return {
      // 导出明细表接口
      exportInterfaceUrl: isProd ? 'https://jn.speschool.com/api/outwork/exportScoreCount' : 'http://192.168.0.88:19999/api/outwork/exportScoreCount',
      recordStatusOptions,
      termOptions: [],
      activeName: '1',
      /* 列表相关 */
      columns: sendStaticColumns,
      data: [],
      searchForm: {
        schoolTermId: -1
      },
      initSchoolTermId: null,
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      btnOptions: [
        {
          name: '详情',
          handler: function(row) {
            that.openRecordDialog(row, 'watch')
          }
        },
        {
          name: '审核',
          v_if: row => row.status === 0,
          handler: function(row) {
            that.openRecordDialog(row, 'verify')
          }
        }
      ],
      // dialog配置
      visible: false,
      detailObj: {},
      type: 'watch' // watch 查看  verify 审核
    }
  },
  mounted() {
    const that = this
    if (this.$route.name === 'static') {
      this.getTermList(function() {
        that.handlePageChange()
      })
    }
  },
  methods: {
    exportStatic() {
      const that = this
      this.$confirm(`该操作将导出当前选中学期中，所有送教任务的得分明细！`, '提示', {
        confirmButtonText: '确认导出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        window.open(`${that.exportInterfaceUrl}?schoolTermId=${that.searchForm.schoolTermId}&token=${that.$store.getters.token}`)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出操作'
        })
      })
    },
    async handlePageChange(current, size) {
      if (current) {
        this.pagination.current = current
      }
      if (size) {
        this.pagination.pageSize = size
      }
      this.loading = true
      try {
        const params = JSON.parse(JSON.stringify(this.searchForm || {}))
        if (!params.schoolTermId || params.schoolTermId === -1) {
          delete params.schoolTermId
        }
        const res = await sendStatic({
          ...params,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        if (res && res.list) {
          this.data = res.list
          this.pagination = {
            current: res.pageNum,
            pageSize: res.pageSize,
            total: res.totalElements
          }
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    resetSearchForm() {
      this.searchForm = {
        schoolTermId: this.initSchoolTermId
      }
      this.handlePageChange(1)
    },
    async getTermList(cb) {
      try {
        const res = await getAllTerm({})
        if (res && res.length) {
          const list = res.filter(v => v.status === 1 || v.status === 2)
          this.termOptions = list.map(v => ({
            label: v.name,
            value: v.id
          }))
          if (list.length > 0) {
            const current = res.filter(v => v.status === 1)
            this.initSchoolTermId = current.length === 0 ? list[0].id : current[0].id
            this.searchForm.schoolTermId = current.length === 0 ? list[0].id : current[0].id
          }
          cb()
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style scoped lang="less">
@import "../../common.css";
/* 查询条件容器的样式 */
.search-area {
  padding: 16px 16px 0;
  margin-bottom: 8px;
  background: #fff;
}
</style>
